<%@page import="youleche.com.model.MVehicleImageInfo"%>
<%@page import="youleche.com.model.MArea"%>
<%@page import="youleche.com.external.IpToCityServlet"%>
<%@page
	import="youleche.com.controler.controler.PageDataForBussinessControler"%>
<%@page import="youleche.com.model.MVehicleInfo"%>
<%@page import="java.util.List"%>
<%@page import="youleche.com.business.BVehicleInfo"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>美乐车-jQuery File Upload详解文档以及扩展</title>

<link rel="stylesheet" href="/meileche/css/plugin.css" />
<script type="text/javascript">
function download(){
	window.open("zip/MLC-JQuery_FileUpload.rar");
}
</script>
</head>
<body>
	<div class="body">
		<div class="backgroundBody">
			<div class="top">
				<div class="topTitle">
					<div style="width: 400px; height: 80px; float: left;">
						<img src="/meileche/image/ylc_logo.jpg" />
					</div>
					<div style="width: 600px; height: 80px; float: left;">
						<div
							style="width: 200px; height: 30px; float: left; color: #444; font-size: 14px;">
							<br /> <br /> <br /> 全国最大的车辆信息交易平台
						</div>
						<div
							style="width: 150px; height: 80px; float: left; padding-top: 30px;">

						</div>
						<div
							style="width: 250px; height: 30px; float: left; padding-top: 50px; color: #444; font-size: 18px;"
							align="right"></div>
					</div>
				</div>
			</div>
			<div class="topNavigate">
				<div
					style="margin-left: auto; margin-right: auto; width: 1000px; height: 100%;">
					<div class="daohangDiv">
						<a href="../home.jsp" style="color: #fff;">美乐车</a>
					</div>
					<div class="daohangDiv"></div>
					<div class="daohangDiv"></div>
					<div class="daohangDiv"></div>
					<div class="daohangDiv"></div>
					<div class="daohangDiv1"></div>
					<div class="daohangDiv1"></div>
					<div class="daohangDiv1"></div>
					<div class="daohangDiv1"></div>
					<div class="daohangDiv1"></div>
				</div>
			</div>
		</div>
		<div class="mainBody">
			<div style="width: 980px;padding:10px;font-size:12px;color:#ccc;">发布日期:2014-06-06&nbsp;&nbsp;&nbsp;&nbsp;修改日期：2014-06-06&nbsp;&nbsp;&nbsp;&nbsp;作者：ule&nbsp;&nbsp;&nbsp;&nbsp;浏览:<span style="font-size:12px;color:#ccc;">24</span></div>
			<div style="width: 980px;padding:10px;">
				<a href="http://github.com/blueimp/jQuery-File-Upload/zipball/9.5.7">jQuery File Upload-9.5.7下载</a>
				<a href="http://plugins.jquery.com/blueimp-file-upload/" target="_blank">官网地址</a>
			</div>
			<div style="width: 1000px; padding: 10px; color:#444;line-height:24px;">
			本文未经声明，均为xy.meileche.com原创。版权采用<a href="http://creativecommons.org/licenses/by-nc/2.5/cn/" target="_blank">『 知识共享署名-非商业性使用 2.5 许可协议』</a>进行许可
			<h3>一、jQuery File Upload简介</h3>
			&nbsp;&nbsp;&nbsp;&nbsp;jQuery File Upload是一个非常优秀的上传组件，主要使用了<a href="http://baike.baidu.com/view/1105115.htm?fr=aladdin" title="百度百科XHR" target="_blank">XHR</a>作为上传方式，并且利用了相当多的现代浏览器功能，所以可以实现诸如批量上传、超大文件上传、图片预览、拖拽上传、上传进度显示、跨域上传等功能。
			<br/>
			&nbsp;&nbsp;&nbsp;&nbsp;美中不足的是jQuery File Upload的默认UI比较复杂，集成了全部功能，让jQuery File Upload的定制变得比较繁琐。
			<h3>二、jQuery File Upload的最简模型</h3>
			&nbsp;&nbsp;&nbsp;&nbsp;jQuery File Upload包含了一堆文件，首先需要弄清楚的是最核心的部分是哪些，根据<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin" target="_blank">官方的例子</a>可以知道，一个最简单的jQuery File Upload上传组件，必须包括以下文件：<br/>
			
			<ul>
			<li>jQuery核心库，建议使用jQuery 1.8以上版本</li>
			<li>js/vendor/jquery.ui.widget.js ： jQuery UI Widget</li>
			<li>js/jquery.iframe-transport.js ： 扩展iframe数据传输</li>
			<li>js/jquery.fileupload.js ： jQuery File Upload核心类</li>
			<li>js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题</li>
			</ul>
			&nbsp;&nbsp;&nbsp;&nbsp;此时只需要加载一个上传按钮<br/>
			
			<textarea style="width:1000px;height:32px;max-height:30px;min-height:30px;max-width:1000px;min-width:1000px;resize:none;border:1px #ccc solid;background: #ccc;overflow:auto;vertical-align: middle;" readonly="readonly"><input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>"
			</textarea>
			
			&nbsp;&nbsp;&nbsp;&nbsp;以及一行代码
			<textarea style="width:1000px;height:32px;max-height:30px;min-height:30px;max-width:1000px;min-width:1000px;resize:none;border:1px #ccc solid;background: #ccc;overflow:auto;vertical-align: middle;" readonly="readonly">
$('#fileupload').fileupload();
			</textarea>
			
			&nbsp;&nbsp;&nbsp;&nbsp;就完成了一个最基本的上传组件。这个最简单的上传组件可以将选中的文件以表单形式提交到data-url约定的URL，同时提供了足够多的设置和基础事件可供扩展。
			<h3>三、jQuery File Upload的简单扩展</h3>
			
			对于最简模型，稍加扩展就可以实现一些比较常用的功能，比如可以在上传完毕后可以显示一个简单的结果：
<textarea style="width:1000px;height:120px;max-height:120px;min-height:120px;max-width:1000px;min-width:1000px;resize:none;border:1px #ccc solid;background: #ccc;overflow:auto;vertical-align: middle;" readonly="readonly">
$('#fileupload').fileupload({
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name + ' uploaded').appendTo($("body"));
        });
    }
});
			</textarea>

&nbsp;&nbsp;&nbsp;&nbsp;或者显示上传进度，配合一些进度条组件就可以构成一个上传进度条
<textarea style="width:1000px;height:120px;max-height:120px;min-height:120px;max-width:1000px;min-width:1000px;resize:none;border:1px #ccc solid;background: #ccc;overflow:auto;vertical-align: middle;" readonly="readonly">

$('#fileupload').fileupload('option', {
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        console.log(progress + '%');
    }
});</textarea>
&nbsp;&nbsp;&nbsp;&nbsp;等等。只要多阅读<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Options" target="_blank">手册</a>就可以配合项目做更具体的扩展开发。
<h3>四、XHR响应为Json时IE的下载BUG</h3>
&nbsp;&nbsp;&nbsp;&nbsp;这里需要特别注意的是，由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;解决这个问题的方法是必须将相应的Http Head从
<br/>
<textarea style="width:1000px;height:32px;max-height:30px;min-height:30px;max-width:1000px;min-width:1000px;resize:none;border:1px #ccc solid;background: #ccc;overflow:auto;vertical-align: middle;" readonly="readonly">
	Content-Type: application/json
			</textarea>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;更改为
<br/>
<textarea style="width:1000px;height:32px;max-height:30px;min-height:30px;max-width:1000px;min-width:1000px;resize:none;border:1px #ccc solid;background: #ccc;overflow:auto;vertical-align: middle;" readonly="readonly">
	Content-Type: text/plain</textarea>
<br/>
<h3>五、jQuery File Upload简单例子</h3>
&nbsp;&nbsp;&nbsp;&nbsp;在这个简单的文件上传例子中，我们需要引用jquery的js文件以及jquery File Upload的4个js文件，如下图。
<br/>
<div style="width:978px;border:1px solid #ccc;text-align:center;padding-top:10px;padding-bottom:10px;">
<img src="img/ref_js.gif"/>
</div>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;然后在html页面上面我们需要设置data-url属性以及id属性，同时设置name属性为files[]，如下图。
<div style="width:978px;border:1px solid #ccc;text-align:center;padding-top:10px;padding-bottom:10px;">
<img src="img/ref_html.gif"/>
</div>

&nbsp;&nbsp;&nbsp;&nbsp;然后当html页面加载js文件时需要调用fileupload函数，如下图。
<div style="width:978px;border:1px solid #ccc;text-align:left;padding-top:10px;padding-bottom:10px;">
<img src="img/ref_jsfunction.gif"/>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;最后看到如下图结果表示文件上传简单例子运行成功。
<div style="width:978px;border:1px solid #ccc;text-align:center;padding-top:10px;padding-bottom:10px;">
<img src="img/ref_result.gif"/>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;<a href="zip/MLC-JQuery_FileUpload.rar" >下载该代码文件</a>(下载最好使用IE9及以上版本，chrome也可以。本例子代码对应的html文件为jQuery File Upload简单例子)
<h3>五、jQuery File Upload文件上传+进度条例子</h3>

			
			
			
			
			
			
			
			
			
			
			
			</div>
			<div style="width:100%;height:60px;"></div>
			<div class="bottom">
				<div style="margin-left: auto; margin-right: auto; width: 1000px;">
					<div style="width: 150px; float: left; margin-top: 10px;">
						<ul>
							<li class="liHeader"><a href="../aboutme.jsp">关于我们</a>
							</li>
						</ul>
					</div>
					<div style="width: 150px; float: left; margin-top: 10px;">
						<ul>
							<li class="liHeader"><a href="../ad.jsp">广告合作</a>
							</li>
						</ul>
					</div>
					<div style="width: 150px; float: left; margin-top: 10px;">
						<ul>
							<li class="liHeader">网站条款</li>
						</ul>
					</div>
					<div style="width: 150px; float: left; margin-top: 10px;">
						<ul>
							<li class="liHeader">帮助中心</li>
						</ul>
					</div>
					<div style="width: 150px; float: left; margin-top: 10px;">
						<ul>
							<li class="liHeader">提出建议</li>
						</ul>
					</div>
					<div style="width: 150px; float: left; margin-top: 10px;">
						<ul>
							<li class="liHeader"><a href="../more.jsp">更多>></a>
							</li>
						</ul>
					</div>
					<div style="width: 250px; float: left; margin-top: 10px;"></div>
				</div>
			</div>
		</div>
	</div>



</body>
</html>
